<template>
  <div class="project-details">
    <div>
      <img src="../assets/img/index-banner1.jpg" width="100%">
    </div>
    <div class="project-content">
      <div class="title" style="text-align: center; font-size: 24px; font-weight: bold;">
        <h1><strong>{{ form.name }}</strong></h1>
      </div>

      <div style="text-align: right; font-size: 15px; color: #fff;">
        <div style="display: flex; justify-content: flex-end; flex-direction: column;">
          <div style="margin-bottom: 10px; text-align: right;">
            <label >奖项 : {{ prizeFormat(form) }}</label>
          </div>
          <div style="display: flex; justify-content: flex-end;">
            <label>来源: {{ lineFormat(form) }}</label>
            <label style="margin-left: 20px;">浏览量 ：{{ form.clickNum }}</label>
          </div>
        </div>
      </div>


      <el-divider></el-divider>
      <div class="description-container">
        <div class="picbox">
          <img class="picbox_img" :src="this.handlePic(form.pic)" alt="Person imag">
        </div>
        <div v-html="form.description" class="rich-text-content"></div>
      </div>
      <div style="text-align: right; font-size: 15px; color: rgb(102, 102, 102);">
        <label>{{ form.createTime }}</label>
      </div>
      <el-divider></el-divider>

      <div style="display: flex; align-items: center; color: rgb(102,102,102); font-size: 15px; margin-left: 15px;">
        <div style="flex: 1;">
          <label v-if="this.hasNext" @click="goNextProject"
                 style="display: block; margin-bottom: 10px; cursor: pointer; margin-right: 20px;">上一个: {{ this.nextName }}</label>
          <label v-if="this.hasPre" @click="goPreProject"
                 style="display: block; margin-bottom: 10px; cursor: pointer;">下一个: {{ this.preName }}</label>
        </div>
        <el-button
          size="mini"
          @click="handleDownload(form.id)"
          style="margin-left: auto;"
        >下载附件
        </el-button>
      </div>


    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css';  // 导入富文本编辑器样式
import {
  addAchievement,
  delAchievement,
  getAchievement,
  listAchievement,
  updateAchievement
} from "@/api/project/achievement";
import dict from "../utils/dict";
import {getNextProject, getPreProject} from "../api/project/demand";
import {getToken} from "../utils/auth";
export default {
  name: 'ProjectDetails',
  dicts: ['project_state', 'project_line', 'project_prize', 'check_result', 'team_name'],
  data() {
    return {
      hasNext: null,
      hasPre: null,
      preId: null,
      nextId: null,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 需求表格数据
      achievementList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      detailOpen: false,
      seeCheckOpen: false,
      nextName: null,
      preName: null,
      prize: null,
      number: 0,
      uploadList: [],
      baseUrl: process.env.VUE_APP_BASE_API,
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      file:null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        type: null,
        line: null,
        prize: null,
        awardTime: null,
        userId: null,
        otherPrize: null,
        state: null,
        needNum: null,
      },
      // 表单参数
      form: {},
      checkForm: {},
      // 表单校验
      rules: {
        name: [
          {required: true, message: "成果名称不能为空", trigger: "blur"},
          {min: 2, max: 40, message: '成果名称长度必须介于 2 和 40 之间', trigger: 'blur'}
        ],
        line: [
          {required: true, message: "线条不能为空", trigger: "blur"}
        ],
        description: [
          {required: true, message: "描述不能为空", trigger: "blur"}
        ]
      }
    };
  },
  created() {
    this.ingId = this.$route.query.id;
    this.from = this.$route.query.from;
    this.initialFrom=this.from;
    this.handleUpdate(this.$route.query.id);
    this.getPreProject(this.$route.query.id,this.initialFrom);
    this.getNextProject(this.$route.query.id,this.initialFrom);
  },
  methods: {
    getPreProject(id,from) {
      getPreProject(id,this.initialFrom).then(response => {
        this.preId = response.data.id;
        if (this.preId === -1) {
          this.hasPre = false;
          this.preName = undefined;
        } else {
          this.hasPre = true;
          this.preName = response.data.name;
        }
      })
    },
    getNextProject(id,from) {
      getNextProject(id,this.initialFrom).then(response => {
        this.nextId = response.data.id;
        if (this.nextId === -1) {
          this.hasNext = false;
          this.nextName = undefined;
        } else {
          this.hasNext = true;
          this.nextName = response.data.name;
        }
      })
    },
    updatePreAndNext() {
      this.getPreProject(this.ingId);
      this.getNextProject(this.ingId);
    },
    goPreProject() {
      this.ingId = this.preId;
      this.handleUpdate(this.ingId);
      this.updatePreAndNext();
    },
    goNextProject() {
      this.ingId = this.nextId;
      this.handleUpdate(this.ingId);
      this.updatePreAndNext();
    },

    handlePic(pic){
      return this.baseUrl + pic;
    },
    dict,
    // 线条字典类型翻译
    lineFormat(row, column) {
      return this.selectDictLabel(this.dict.type.project_line, row.line);
    },
    // 奖项字典类型翻译
    prizeFormat(row, column) {
      return this.selectDictLabel(this.dict.type.project_prize, row.prize);
    },
    // 操作人2
    check2Format(row, column) {
      return this.selectDictLabel(this.dict.type.team_name, row.checker2);
    },
    // 表单重置
    reset() {
      this.checkForm = {
        checker1Id: null,
        checker2Id: null,
        result1: null,
        result2: null,
        suggestion1: null,
        suggestion2: null,
        checker_time1: null,
        checker_time2: null
      };
      this.form = {
        id: undefined,
        name: undefined,
        type: 3,
        description: undefined,
        line: undefined,
        keyTask: undefined,
        keyTask1: undefined,
        keyTask2: undefined,
        keyTask3: undefined,
        prize: undefined,
        awardTime: undefined,
        file: undefined,
        innovation: undefined,
        userId: undefined,
        clickNum: 0,
        otherPrize: undefined,
        checker1: undefined,
        checker2: undefined,
        state: 0,
        needNum: undefined,
        isShow: undefined,
        createTime: undefined
      };
      this.resetForm("form");
    },
    handleUpdate(id) {
      this.reset();
      getAchievement(id).then(response => {
        this.form = response.data;
        this.file=this.form.file;
      });
    },
    handleDownload(id){
      getAchievement(id).then(response => {
        this.form = response.data;
        if (this.form.file) {
          this.downloadFile(this.baseUrl+this.form.file);
        } else {
          alert('没有上传附件。');
        }
      }).catch(error => {
        console.error('Failed to fetch file:', error);
      });
    },
    downloadFile(url) {
      // 创建一个隐形的 <a> 标签
      const link = document.createElement('a');
      link.href = url;
      link.download = url.split('/').pop(); // 从 URL 中提取文件名
      document.body.appendChild(link); // 添加到 DOM
      link.click(); // 模拟点击
      document.body.removeChild(link); // 从 DOM 中移除
    }
  }
};
</script>

<style scoped>
.title{
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
}

.project-details {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 0 100px;
  /* padding: 20px; */
  box-sizing: border-box;
  /* background-repeat: no-repeat;
  background-position: calc(100% - 215px) calc(100% - 100px);
  background-size: auto 100px; */
}

.project-content {
  max-width: 80%; /* 控制内容的最大宽度 */
  width: 100%;
  border: 50px solid #ffffff;
  border-bottom: 0px;
  margin-top: -250px;
  /* background: #ffffffad; */
  background-color: #ffffffad;
  /* background-color: rgba(255, 255, 255, 0.9); //添加背景颜色，透明度根据需求调整 */
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.description-container {
  width: 100%; /* 边框容器占据父容器的80% */
  margin: 0 auto; /* 自动居中 */
  line-height: 2;
  padding: 10px; /* 可选：添加内边距以增强内容与边框之间的间距 */
}
.picbox {
  margin-top: 20px;
  width: 100%;
  text-align: center;
}
.picbox_img {
  width: 200px;
  height: 200px;
  object-fit:contain;
  margin-right: 10px;
  background-color: #ffffffad;
  box-shadow: 0 0 16px rgba(0, 0.1, 0, 0.1);
  border-radius: 4px;
}

.rich-text-content {
  width: 100%; /* 内容占据父容器的100% */
  font-size: 20px;

}
h1 {
  font-size: 36px;
  margin-bottom: 20px;
  text-align: center; /* 居中标题文本 */
  line-height: 1.5;
}

h2 {
  font-size: 18px;
  margin-left: 90px;
  margin-right: 40px;
  line-height: 1.7;
}

h3 {
  margin-top: 30px;
  text-align: right;
  color: rgb(102, 102, 102);
}


p {
  font-size: 23px;
  line-height: 1.6;
  margin-bottom: 15px;
  margin-left: 50px;
  margin-top: 20px;
}

strong {
  font-weight: bold;
}
</style>
